<template>
  <el-table-column
    :prop="prop"
    v-bind="$attrs"
  >
    <template slot-scope="scope">
      <span
        @click.prevent="toggleHandle(scope.$index, scope.row)"
        :style="childStyles(scope.row)"
      >
        <i
          :class="iconClasses(scope.row)"
          :style="iconStyles(scope.row)"
        ></i>
        {{ scope.row[prop] }}
      </span>
    </template>
  </el-table-column>
</template>

<script>
import isArray from 'lodash/isArray'
export default {
  name: 'table-tree-column',
  data() {
    return {
      arr: []
    }
  },
  props: {
    prop: {
      type: String
    },
    treeKey: {
      type: String,
      default: 'id'
    },
    parentKey: {
      type: String,
      default: 'parentId'
    },
    levelKey: {
      type: String,
      default: 'level'
    },
    childKey: {
      type: String,
      default: 'children'
    }
  },
  methods: {
    childStyles(row) {
      return { 'padding-left': (row[this.levelKey] * 25) + 'px' }
    },
    iconClasses(row) {
      return [!row._expanded ? 'el-icon-caret-right' : 'el-icon-caret-bottom']
    },
    iconStyles(row) {
      return { 'visibility': this.hasChild(row) ? 'visible' : 'hidden' }
    },
    hasChild(row) {
      return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
    },
    // 切换处理
    toggleHandle(index, row) {
      // console.log(row,'this row ')
      if (this.hasChild(row)) {
        var data = this.$parent.store.states.data.slice(0)
        data[index]._expanded = !data[index]._expanded
        if (data[index]._expanded) {
          data = data.splice(0, index + 1).concat(this.addChildNode(row[this.childKey])).concat(data)
          // data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
        } else {
          data = this.removeChildNode(data, row[this.treeKey])
        }
        // console.log(data,'show data')
        this.$parent.store.commit('setData', data)
        this.$nextTick(() => {
          this.$parent.doLayout()
        })
      }
    },
    addChildNode(row) {
      // console.log(row,'点击当前项的产生的下级数据 row ')
      // 遍历下一级项 如果下级数据中 存在展开项 继续操作
      var arr = []
      this.forE(row, arr)
      return arr
    },
    forE(row, arr) {
      var _this = this
      row.forEach(item => {
        if (item._expanded) {
          arr.push(item)
          // item['children'].forEach(childitem => {
          //   if(childitem._expanded){
          //     arr.push(childitem)
          //     // arr.push(childitem['children'])
          //     //继续循环
          //   }else{
          //     arr.push(childitem)
          //   }
          // });
          _this.forE(item[_this.childKey], arr)
        } else {
          arr.push(item)
        }
      })
    },
    // 移除子节点
    removeChildNode(data, parentId) {
      var parentIds = isArray(parentId) ? parentId : [parentId]
      if (parentId.length <= 0) {
        return data
      }
      var ids = []
      for (var i = 0; i < data.length; i++) {
        if (parentIds.indexOf(data[i][this.parentKey]) !== -1 && parentIds.indexOf(data[i][this.treeKey]) === -1) {
          ids.push(data.splice(i, 1)[0][this.treeKey])
          i--
        }
      }
      return this.removeChildNode(data, ids)
    }
  }
}
</script>